import {Component,Input,OnInit} from '@angular/core';

export class Step{
	stepValue: number;
	public stepChecked: boolean=false;
	constructor(stepValue: number) {
		this.stepValue = stepValue;

	}
}

@Component({
	selector: "drop-item",
	inputs: ['textValue'],
	host:{
		class: 'dropitem droppable'
	},
	template: `
	<span></span>
	<div >{{textValue}}</div>
	`
})
export class DropItem {
	public textValue: string;
	public item: any;
	constructor(){
		this.textValue = "Location";
		this.item = {left:'50px' ,color: 'red'};
	}
}

/* jshint bitwise:false, node:true */
/* tslint:disable:no-bitwise no-var-keyword typedef */

// taken from TodoMVC
export function uuid() {
    var i, random;
    var result = '';

    for (i = 0; i < 32; i++) {
        random = Math.random() * 16 | 0;
        if (i === 8 || i === 12 || i === 16 || i === 20) {
            result += '-';
        }
        result += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random))
            .toString(16);
    }

    return result;
};


@Component({
 	selector:'outer-drop',
    directives: [DropItem],
    inputs: ['stepItem', 'dropItemInnerHTML'],
 	template:`
	<div id="{{myid}}" style="background-color:#F8F8F8;width:100%; height:30px; margin:30 0 0 0 ;  position:relative;">
		
		<input (click)="isChecked($event)"  *ngIf="stepItem.stepValue!=10" type="checkbox" style="margin:8px 0 0 0; left:20px; position:absolute;" >
		<h class="step" >{{stepItem.stepValue}}</h>
		<drop-item  [textValue]="dropItemInnerHTML.passLoc"  [ngStyle]="{'border-color': 'green','left':'100px'}" ></drop-item>
		<img  src="static/css/images/left2.png" style="width:50; left:200px;top:5px; position:absolute;">
		<drop-item  [ngStyle]="{'border-color': 'red','left':'250px'}"></drop-item>
		<img  *ngIf="stepItem.stepValue!=10" src="static/css/images/down2.png" style="height:30px; left:143px; top:-30px ; position:absolute;">
		<drop-item *ngIf="dropItemInnerHTML.fromLoc1=='From Loc'" [ngStyle]="{'border-color': 'blue'}" [style.left]="'400px'"></drop-item>
		<drop-item *ngIf="dropItemInnerHTML.fromLoc2=='From Loc'" [ngStyle]="{'border-color': 'blue'}" [style.left]="'520px'"></drop-item>
		<drop-item *ngIf="dropItemInnerHTML.fromLoc3=='From Loc'" [ngStyle]="{'border-color': 'blue'}" [style.left]="'640px'"></drop-item>
		<drop-item *ngIf="dropItemInnerHTML.fromLoc4=='From Loc'" [ngStyle]="{'border-color': 'blue'}" [style.left]="'760px'"></drop-item>
	</div>
 	`
})
export class ToolBar implements OnInit {
	private myid= uuid();
	stepItem: Step;
	public index: number = 0;
	public dropItemInnerHTML: any;

	constructor(){

	}

	private generateId():any{	

		// return "outDiv"+this.myid++;
	}

	private generateStepId(): number {
		return 10;
	}

	isChecked(event) {
		if (event.target.checked) {
			this.stepItem.stepChecked = true;
		}else{
			this.stepItem.stepChecked = false;
		}
	}

	ngOnInit(): void{

	}
}

/*<input id="checkbox5" type="checkbox" style="margin:8 0 0 0; left:20px; position:absolute;">
		<div id="ext-gen1217" class="failLoc">Fail Loc</div>
		<img id="ext-gen1218" src="static/css/images/left2.png" style="width:50; left:200px;top:5px; position:absolute;">
		<div id="ext-gen1219" class="passLoc">Current Loc</div>
		<img id="ext-gen1220" src="static/css/images/down2.png" style="height:30px; left:143px; top:-30px ; position:absolute;">
		<div id="ext-gen1221" style="font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px; left:400px; position:absolute;">From Loc</div>
		<div id="ext-gen1222" style="font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px; left:520px; position:absolute;">From Loc</div>
		<div id="ext-gen1223" style="font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px;  left:640px; position:absolute;">From Loc</div>
		<div id="ext-gen1224" style="font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px; left:760px; position:absolute;">From Loc</div>
		<h id="step5" style="border-radius:20px;font-weight: bold;margin:2 0 0 0; padding:5px 0 0 0; text-align:center;width:25;height:25;background-color:#696262; color: white;left:50px; position:absolute;">50</h>*/